<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import { HomeList } from "@/api/library/index";
import {
  getTotalBookCount,
  getOpenHour,
  getInventoryPlanCount,
  getInventoryPlanInfo,
  getMonthReportCount,
  getWeekInventoryInfo,
  getRobotsPower,
  getRobotActiveState,
} from "@/api/home/index";
import useUserStore from "@/store/modules/user";

import * as echarts from "echarts";

let useStore = useUserStore();
const hasRole = (role: any) => {
  return useStore.user.roles.includes(role);
};
const lineREF = ref<HTMLElement | null>(null);
const pieREF = ref<HTMLElement | null>(null);

onMounted(async () => {
  // useStore.userInfo();

  var myChart = echarts.init(lineREF.value);
  const res = await HomeList(useStore.encryptedData);
  const options = {
    color: ["#9D96F5", "#8378EA", "#96BFFF"],
    title: {
      text: "机器人状态折线图",
      // subtext: '收入占比（元）',
      x: "center",
    },
    grid: {
      top: 60,
      right: 70,
      bottom: 30,
      left: 60,
    },
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      top: 10,
      right: 10,
      feature: {
        mark: { show: true },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      orient: "vertical",
      left: 10,
      top: 20,
      bottom: 10,
      data: ["数量"],
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["在线", "离线", "故障"],
    },
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value} ",
        },
      },
    ],
    series: [
      {
        name: "数量",
        type: "line",
        data: res.data.robotStatusList,
        smooth: true,
      },
    ],
  };
  myChart.setOption(options);

  const pieMyChart = echarts.init(pieREF.value);

  const Options = {
    title: {
      text: "图书馆饼状图",
      // subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: res.data.libraryList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  // 处理只显示前五个数据，并将剩余数据合并到一个名为"其他"的数据项中
  const data = res.data.libraryList;
  if (data.length > 5) {
    let sum = 0;
    for (let i = 5; i < data.length; i++) {
      sum += data[i].value;
    }
    const othersData = { name: "其他", value: sum };
    Options.series[0].data = data.slice(0, 5); // 只保留前五个数据
    Options.series[0].data.push(othersData); // 添加"其他"数据项
  }

  pieMyChart.setOption(Options);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
  window.addEventListener("resize", () => {
    pieMyChart.resize();
  });
  // ---------------------------------------------
});
// -----------------------------------------------
const currentTime = ref<string>("");
const hourss = ref();
const minutess = ref();
// 更新当前时间的函数

const updateTime = () => {
  const now = new Date();
  // 获取小时和分钟，不包括秒
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  // 拼接成 "HH:MM" 的格式
  currentTime.value = `${hours}:${minutes}`;
  hourss.value = hours;
  minutess.value = minutes;
};
// 在组件挂载时启动定时器

onMounted(() => {
  updateTime(); // 初始化时设置一次时间

  const interval = setInterval(updateTime, 1000); // 每秒更新一次

  // 在组件卸载时清除定时器

  onUnmounted(() => {
    clearInterval(interval);
  });
});
const barREF = ref<HTMLElement | null>(null);
const pREF = ref<HTMLElement | null>(null);
const libraryREF = ref<HTMLElement | null>(null);
const categoryREF = ref<HTMLElement | null>(null);
const reserveREF = ref<HTMLElement | null>(null);
const librarytotalREF = ref<HTMLElement | null>(null);
const reserveTWOREF = ref<HTMLElement | null>(null);
const librarytotalTWOREF = ref<HTMLElement | null>(null);

const forTime = ref();
const TimeEnd = ref();
const InventoryPlanC = ref();
const PlanInfo = ref([]);
const ReportCount = ref([
  { name: "错架图书报表", value: 0 },
  { name: "图书差异报表", value: 0 },
  { name: "在架图书报表", value: 0 },
  { name: "遗失图书报表", value: 0 },
  { name: "位置变动报表", value: 0 },
  { name: "遗失图书报表", value: 0 },
  { name: "图书倒架报表", value: 0 },
  { name: "敏感图书报表", value: 0 },
] as any);
// 数据

const Power = ref([
  { name: "1日", value: [0, 0, 0] },
  { name: "2日", value: [0, 0, 0] },
  { name: "3日", value: [0, 0, 0] },
  { name: "4日", value: [0, 0, 0] },
]);

const ActiveState = ref([
  { currentPower: 0, robotName: "" },
  { currentPower: 0, robotName: "" },
  { currentPower: 0, robotName: "" },
]);
// ----------------------------------------------------
// 折线图----------------

// ---------------------
// 提取报表名称和对应的值
const reportValues = ref([]);
const WeekInventory = ref([
  { name: "", value: [0, 0, 0] },
  { name: "", value: [0, 0, 0] },
  { name: "", value: [0, 0, 0] },
  { name: "", value: [0, 0, 0] },
]);
const reportNames = ReportCount.value.map((item) => item.name);

const currentMonth = new Date().toLocaleString("default", { month: "long" }); // 获取当前月份的中文名称
//const currentMonthShort = new Date().getMonth(); // 获取当前月份的数字，如 7 表示 8月
if (useStore.user.roles.includes("ADMIN")) {
  onMounted(async () => {
    const totalres = await getTotalBookCount(useStore.encryptedData);
    const OpenHour = await getOpenHour(useStore.encryptedData);
    const InventoryPlanCount = await getInventoryPlanCount(
      useStore.encryptedData
    );
    const InventoryPlanInfo = await getInventoryPlanInfo(
      useStore.encryptedData
    );
    const MonthReportCount = await getMonthReportCount(useStore.encryptedData);
    const WeekInventoryInfo = await getWeekInventoryInfo(
      useStore.encryptedData
    );
    const RobotsPower = await getRobotsPower(useStore.encryptedData);
    const RobotActiveState = await getRobotActiveState(useStore.encryptedData);
    //console.log(WeekInventoryInfo, "data");
    ReportCount.value = MonthReportCount.data;
    reportValues.value = MonthReportCount.data.map((item: any) => item.value);

    InventoryPlanC.value = InventoryPlanCount.data;
    PlanInfo.value = InventoryPlanInfo.data;
    WeekInventory.value = WeekInventoryInfo.data;
    Power.value = RobotActiveState.data;
    ActiveState.value = RobotsPower.data;
    console.log(WeekInventoryInfo, "WeekInventoryInfo");
    console.log(OpenHour, "OpenHour");

    // 获取时间部分（假设格式是 "YYYY-MM-DD HH:MM:SS"）
    const timeString =
      OpenHour.data?.libraryBeginTime?.split(" ")[1] || "00:00:00";
    const tSg = OpenHour.data?.libraryEndTime?.split(" ")[1] || "00:00:00";
    // 分割时:分:秒
    const [hours = 0, minutes = 0, seconds = 0] = timeString.split(":");
    const [endHours = 0, endMinutes = 0, endSeconds = 0] = tSg.split(":");

    //console.log(timeString, "timeString");
    // 开馆时间
    forTime.value = `${hours}:${minutes}:${seconds}`;
    // 闭馆时间
    TimeEnd.value = `${endHours}:${endMinutes}:${endSeconds}`;
    // --------------------------
    // 初始化 ECharts 实例
    const myChart = echarts.init(barREF.value);
    //机器人使用状态配置项
    // 配置图表的选项
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["在线", "离线", "故障"],
        left: "4%", // 控制图例的位置，调整上下位置
        top: "42%", // 控制图例的位置，调整左右位置
        itemWidth: 20, // 控制图例项的宽度
        itemHeight: 12, // 控制图例项的高度
        orient: "vertical", // 图例排列方向，'horizontal' 是横向排列，'vertical' 是纵向排列
      },
      grid: {
        top: "20%",
        left: "18%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      yAxis: {
        type: "value",
        min: 0, // 强制y轴从0开始
        max: (value) => Math.max(value.max, 1), // 至少显示到1
        axisLabel: {
          formatter: (value) => {
            // 处理浮点误差导致的极小值
            return Math.abs(value) < 1e-6 ? "0" : Math.round(value);
          },
        },
      },
      xAxis: {
        type: "category",
        data: Power.value.map((item) => item.name), // 从 Power.value 提取 x 轴数据
      },
      series: [
        {
          name: "在线",
          type: "bar",
          data: Power.value.map((item) => item.value[0]), // 获取每个 "在线" 的数据
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: "#4C87E0",
            },
          },
        },
        {
          name: "离线",
          type: "bar",
          data: Power.value.map((item) => item.value[1]), // 获取每个 "离线" 的数据
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: "#59A455",
            },
          },
        },
        {
          name: "故障",
          type: "bar",
          data: Power.value.map((item) => item.value[2]), // 获取每个 "故障" 的数据
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: "#F5676C",
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    // --------------------------
    // --------------------------
    const pChart = echarts.init(pREF.value);
    // 动态生成配置
    const poption = {
      graphic: ActiveState.value.map((robot, index) => ({
        type: "text",
        left: "15%",
        top: `${20 + index * 29}%`,
        style: {
          text: robot.robotName,
          font: "16px sans-serif",
          fill: "#000000",
        },
      })),
      tooltip: {
        trigger: "item",
      },
      series: ActiveState.value.slice(0, 3).map((robot, index) => {
        // 确保 currentPower 是数字，且在 0-100 范围内
        const currentPower = Math.max(
          0,
          Math.min(100, Number(robot.currentPower) || 0)
        );
        return {
          type: "pie",
          radius: ["17%", "27%"],
          center: ["79%", `${23 + index * 30}%`],
          labelLine: { show: false },
          data: [
            {
              value: currentPower,
              itemStyle: {
                color:
                  index === 0 ? "#2F99FA" : index === 1 ? "#58A457" : "#F96873",
              },
              label: {
                show: true,
                position: "center",
                formatter: `${currentPower}%`, // 直接使用计算后的值
                color: "#666666",
                fontSize: 12,
              },
            },
            {
              value: 100 - currentPower,
              itemStyle: { color: "#DDDDDD" },
              label: { show: false },
            },
          ],
          title: {
            text: robot.robotName,
            left: "15%",
            top: `${15 + index * 30}%`,
            textStyle: {
              fontSize: 15,
              fontWeight: "normal",
              color: "#666666",
            },
          },
        };
      }),
    };
    pChart.setOption(poption);
    window.addEventListener("resize", () => {
      pChart.resize();
    });
    // --------------------------
    // --------------------------
    const libraryChart = echarts.init(libraryREF.value);
    //图书报表配置项
    const barColors = [
      "#4C8AE6",
      "#69BABF",
      "#53A65B",
      "#F4BB41",
      "#EC7437",
      "#D6503B",
      "#D6503B",
    ];
    const labelColors = [
      "#4C8AE6",
      "#69BABF",
      "#53A65B",
      "#F4BB41",
      "#EC7437",
      "#D6503B",
      "#D6503B",
    ];
    const libraryoption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: [
        {
          x: "right",
          top: "30%", // 控制图例距离顶部的百分比位置
          right: "0%", // 减少这个值，使图例更靠近右侧边缘
          orient: "vertical", // 图例排列方向，'horizontal' 是横向排列，'vertical' 是纵向排列
          textStyle: {
            color: "#000",
          },
          data: reportNames,
        },
      ],
      grid: {
        top: "15%",
        left: "5%",
        right: "29%", // 增加这个值，为图例留出更多空间
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        min: 0, // 固定最小值为 0
        //max: 1, // 固定最大值为 2（根据实际数据调整）
        interval: 1, // 强制刻度间隔为 1
        // axisLabel: {
        //   formatter: function (value) {
        //     // 只显示整数标签（如将 1.0 显示为 1）
        //     return value % 1 === 0 ? value : "";
        //   },
        // },
      },
      yAxis: {
        type: "category",
        data: [currentMonth], // 当前月份动态显示
      },
      series: reportNames.map((name, index) => ({
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: labelColors[index % labelColors.length], // 使用labelColors数组来给标签设置颜色
            },
          },
        },
        name: name,
        type: "bar",
        data: [reportValues.value[index]],
        barWidth: "8%",
        barGap: "0%", // 控制不同系列之间的间距
        barCategoryGap: "50%", // 调整柱子间距
        itemStyle: {
          normal: {
            color: barColors[index % barColors.length], // 使用barColors数组来设置柱子的颜色
          },
        },
      })),
    };
    libraryChart.setOption(libraryoption);

    window.addEventListener("resize", () => {
      libraryChart.resize();
    });
    // --------------------------
    // --------------------------
    const categoryChart = echarts.init(categoryREF.value);
    // 盘点信息配置图表的选项
    const categoryoption = {
      // title: [
      //   {
      //     text: "盘点信息", // 左边的标题
      //     top: "3%",
      //     left: "6%", // 位置设置为左侧
      //     textStyle: {
      //       fontSize: 16,
      //       color: "#000000", // 设置字体颜色为红色
      //     },
      //   },
      // ],
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["当日盘点", "当日漏盘", "当日错架"],
        bottom: "5%",
      },
      grid: {
        top: "8%",
        left: "8%",
        right: "8%",
        bottom: "18%",
        containLabel: true,
      },

      xAxis: {
        type: "category",
        data: WeekInventory.value.map((item) => item.name), // 从 Power.value 提取 x 轴数据
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "当日盘点",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[0]),
        },
        {
          name: "当日漏盘",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[1]),
        },
        {
          name: "当日错架",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[2]),
        },
      ],
    };
    categoryChart.setOption(categoryoption);
    window.addEventListener("resize", () => {
      categoryChart.resize();
    });
    // --------------------------
    // --------------------------
    const reserveChart = echarts.init(reserveREF.value);
    //预约盘点配置
    const reserveoption = {
      title: {
        text: `${InventoryPlanC.value}个`,
        textStyle: {
          color: "#000",
          fontSize: 20,
          fontWeight: "bold",
        },
        left: "center",
        bottom: "38%",
        itemGap: 60,
      },
      // grid: {
      //   top: "10%", // 上边距
      //   left: "10%", // 左边距
      //   right: "10%", // 右边距
      //   bottom: "10%", // 下边距
      // },
      tooltip: {
        show: false,
      },
      legend: {},
      series: [
        {
          name: "内圈",
          type: "pie",
          hoverAnimation: false,
          tooltip: {},
          radius: [0, "100%"],

          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "#C5E2FF",
                },
              },
            },
          ],
        },
      ],
    };
    reserveChart.setOption(reserveoption);
    window.addEventListener("resize", () => {
      reserveChart.resize();
    });
    // --------------------------
    // --------------------------
    const reserveTWOChart = echarts.init(reserveTWOREF.value);

    const reserveTWOoption = {
      tooltip: {
        trigger: "item",
      },

      color: ["#5284EE", "#51A756", "#F5676C"], // 设置三个扇形的颜色
      legend: {
        top: "25%",
        left: "8%",
        orient: "vertical", // 图例排列方向，'horizontal' 是横向排列，'vertical' 是纵向排列
      },
      grid: {
        top: "1%",
      },
      series: [
        {
          name: "任务状态",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          center: ["65%", "40%"], // 饼图的中心位置
          itemStyle: {
            borderRadius: 5,
            borderColor: "#fff",
            borderWidth: 1,
          },
          label: {
            show: true,
            position: "center", // 在中心显示
            formatter: function (params) {
              return ` ${params.percent.toFixed(2)}%`; // 显示扇形的百分比
              // return `${params.name}: ${params.percent.toFixed(2)}%`; // 显示扇形的百分比
            },
            fontSize: 18, // 可以调整字体大小
            fontWeight: "bold", // 设置字体加粗
          },
          labelLine: {
            show: false,
          },
          data: PlanInfo.value,
        },
      ],
    };
    reserveTWOChart.setOption(reserveTWOoption);
    window.addEventListener("resize", () => {
      reserveTWOChart.resize();
    });
    // --------------------------
    // --------------------------
    const librarytotalChart = echarts.init(librarytotalREF.value);
    //图书总量配置
    const librarytotaleoption = {
      title: {
        text: totalres.data,
        textStyle: {
          color: "#000",
          fontSize: 20,
          fontWeight: "bold",
        },
        left: "center",
        bottom: "38%",
        itemGap: 60,
      },
      // grid: {
      //   top: "10%", // 上边距
      //   left: "10%", // 左边距
      //   right: "10%", // 右边距
      //   bottom: "10%", // 下边距
      // },
      tooltip: {
        show: false,
      },
      legend: {},
      series: [
        {
          name: "内圈",
          type: "pie",
          hoverAnimation: false,
          tooltip: {},
          radius: [0, "100%"],

          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "#C5E2FF",
                },
              },
            },
          ],
        },
      ],
    };
    librarytotalChart.setOption(librarytotaleoption);
    window.addEventListener("resize", () => {
      librarytotalChart.resize();
    });
    // --------------------------
    // --------------------------
    const librarytotalTWOChart = echarts.init(librarytotalTWOREF.value);
    const librarytotaleTWOoption = {
      grid: {
        top: "5%",
        left: "5%",

        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: true,

          axisLine: {
            show: false, // 隐藏x轴线
          },
          axisLabel: {
            show: false, // 隐藏x轴的标签
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false, // 隐藏x轴的刻度线
          },
        },
      ],
      yAxis: [
        {
          show: false,
        },
      ],
      series: [
        {
          z: 1,
          type: "bar",
          name: "TIT",
          tooltip: {
            show: false,
          },
          animation: false,
          barWidth: "35%",
          hoverAnimation: false,
          data: [
            1520, 2800, 2400, 4000, 3200, 2530, 3710, 3300, 2791, 3000, 4090,
            2400, 2800, 1520,
          ],

          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: "#1E90FF",
              opacity: 1,
              label: {
                show: false,
              },
              shadowColor: "rgba(0, 0, 0, .2)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
          },
        },
      ],
    };
    librarytotalTWOChart.setOption(librarytotaleTWOoption);
    window.addEventListener("resize", () => {
      librarytotalTWOChart.resize();
    });

    // --------------------------
    // --------------------------
  });
}

// ---------------------------------------------------------------------------------------------------
if (useStore.user.roles.includes("OPERATOR")) {
  onMounted(async () => {
    const totalres = await getTotalBookCount(useStore.encryptedData);
    const OpenHour = await getOpenHour(useStore.encryptedData);
    const InventoryPlanCount = await getInventoryPlanCount(
      useStore.encryptedData
    );
    const InventoryPlanInfo = await getInventoryPlanInfo(
      useStore.encryptedData
    );

    const WeekInventoryInfo = await getWeekInventoryInfo(
      useStore.encryptedData
    );

    InventoryPlanC.value = InventoryPlanCount.data;
    PlanInfo.value = InventoryPlanInfo.data;
    WeekInventory.value = WeekInventoryInfo.data;
    //console.log(MonthReportCount.data, "MonthReportCount");
    // 获取时间部分（假设格式是 "YYYY-MM-DD HH:MM:SS"）
    const timeString =
      OpenHour.data?.libraryBeginTime?.split(" ")[1] || "00:00:00";
    const tSg = OpenHour.data?.libraryEndTime?.split(" ")[1] || "00:00:00";
    // 分割时:分:秒
    const [hours = 0, minutes = 0, seconds = 0] = timeString.split(":");
    const [endHours = 0, endMinutes = 0, endSeconds = 0] = tSg.split(":");

    //console.log(timeString, "timeString");
    // 开馆时间
    forTime.value = `${hours}:${minutes}:${seconds}`;
    // 闭馆时间
    TimeEnd.value = `${endHours}:${endMinutes}:${endSeconds}`;
    // --------------------------
    const libraryChart = echarts.init(libraryREF.value);
    //图书报表配置项
    const barColors = [
      "#4C8AE6",
      "#69BABF",
      "#53A65B",
      "#F4BB41",
      "#EC7437",
      "#D6503B",
      "#D6503B",
    ];
    const labelColors = [
      "#4C8AE6",
      "#69BABF",
      "#53A65B",
      "#F4BB41",
      "#EC7437",
      "#D6503B",
      "#D6503B",
    ];
    const libraryoption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: [
        {
          x: "right",
          top: "30%", // 控制图例距离顶部的百分比位置
          right: "0%", // 减少这个值，使图例更靠近右侧边缘
          orient: "vertical", // 图例排列方向，'horizontal' 是横向排列，'vertical' 是纵向排列
          textStyle: {
            color: "#000",
          },
          data: reportNames,
        },
      ],
      grid: {
        top: "15%",
        left: "5%",
        right: "29%", // 增加这个值，为图例留出更多空间
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: [currentMonth], // 当前月份动态显示
      },
      series: reportNames.map((name, index) => ({
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: labelColors[index % labelColors.length], // 使用labelColors数组来给标签设置颜色
            },
          },
        },
        name: name,
        type: "bar",
        data: [reportValues.value[index]],
        barWidth: "8%",
        barGap: "0%", // 控制不同系列之间的间距
        barCategoryGap: "50%", // 调整柱子间距
        itemStyle: {
          normal: {
            color: barColors[index % barColors.length], // 使用barColors数组来设置柱子的颜色
          },
        },
      })),
    };
    libraryChart.setOption(libraryoption);

    window.addEventListener("resize", () => {
      libraryChart.resize();
    });
    // --------------------------
    // --------------------------
    const categoryChart = echarts.init(categoryREF.value);
    // 盘点信息配置图表的选项
    const categoryoption = {
      // title: [
      //   {
      //     text: "盘点信息", // 左边的标题
      //     top: "3%",
      //     left: "6%", // 位置设置为左侧
      //     textStyle: {
      //       fontSize: 16,
      //       color: "#000000", // 设置字体颜色为红色
      //     },
      //   },
      // ],
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["当日盘点", "当日漏盘", "当日错架"],
        bottom: "5%",
      },
      grid: {
        top: "8%",
        left: "8%",
        right: "8%",
        bottom: "18%",
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: WeekInventory.value.map((item) => item.name),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "当日盘点",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[0]),
        },
        {
          name: "当日漏盘",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[1]),
        },
        {
          name: "当日错架",
          type: "line",

          data: WeekInventory.value.map((item) => item.value[2]),
        },
      ],
    };
    categoryChart.setOption(categoryoption);
    window.addEventListener("resize", () => {
      categoryChart.resize();
    });
    // --------------------------
    // --------------------------
    const reserveChart = echarts.init(reserveREF.value);
    //预约盘点配置
    const reserveoption = {
      title: {
        text: `${InventoryPlanC.value}个`,
        textStyle: {
          color: "#000",
          fontSize: 20,
          fontWeight: "bold",
        },
        left: "center",
        bottom: "38%",
        itemGap: 60,
      },
      // grid: {
      //   top: "10%", // 上边距
      //   left: "10%", // 左边距
      //   right: "10%", // 右边距
      //   bottom: "10%", // 下边距
      // },
      tooltip: {
        show: false,
      },
      legend: {},
      series: [
        {
          name: "内圈",
          type: "pie",
          hoverAnimation: false,
          tooltip: {},
          radius: [0, "100%"],

          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "#C5E2FF",
                },
              },
            },
          ],
        },
      ],
    };
    reserveChart.setOption(reserveoption);
    window.addEventListener("resize", () => {
      reserveChart.resize();
    });
    // --------------------------
    // --------------------------
    const reserveTWOChart = echarts.init(reserveTWOREF.value);

    const reserveTWOoption = {
      tooltip: {
        trigger: "item",
      },

      color: ["#5284EE", "#51A756", "#F5676C"], // 设置三个扇形的颜色
      legend: {
        top: "25%",
        left: "10%",
        right: "0%",
        orient: "vertical", // 图例排列方向，'horizontal' 是横向排列，'vertical' 是纵向排列
      },
      grid: {
        top: "1%",
      },
      series: [
        {
          name: "任务状态",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          center: ["65%", "40%"], // 饼图的中心位置
          itemStyle: {
            borderRadius: 5,
            borderColor: "#fff",
            borderWidth: 1,
          },
          label: {
            show: true,
            position: "center", // 在中心显示
            formatter: function (params) {
              return ` ${params.percent.toFixed(2)}%`; // 显示扇形的百分比
              // return `${params.name}: ${params.percent.toFixed(2)}%`; // 显示扇形的百分比
            },
            fontSize: 18, // 可以调整字体大小
            fontWeight: "bold", // 设置字体加粗
          },
          labelLine: {
            show: false,
          },
          data: PlanInfo.value,
        },
      ],
    };
    reserveTWOChart.setOption(reserveTWOoption);
    window.addEventListener("resize", () => {
      reserveTWOChart.resize();
    });
    // --------------------------
    // --------------------------
    const librarytotalChart = echarts.init(librarytotalREF.value);
    //图书总量配置
    const librarytotaleoption = {
      title: {
        text: totalres.data,
        textStyle: {
          color: "#000",
          fontSize: 20,
          fontWeight: "bold",
        },
        left: "center",
        bottom: "38%",
        itemGap: 60,
      },
      // grid: {
      //   top: "10%", // 上边距
      //   left: "10%", // 左边距
      //   right: "10%", // 右边距
      //   bottom: "10%", // 下边距
      // },
      tooltip: {
        show: false,
      },
      legend: {},
      series: [
        {
          name: "内圈",
          type: "pie",
          hoverAnimation: false,
          tooltip: {},
          radius: [0, "100%"],

          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "#C5E2FF",
                },
              },
            },
          ],
        },
      ],
    };
    librarytotalChart.setOption(librarytotaleoption);
    window.addEventListener("resize", () => {
      librarytotalChart.resize();
    });
    // --------------------------
    // --------------------------
    const librarytotalTWOChart = echarts.init(librarytotalTWOREF.value);
    const librarytotaleTWOoption = {
      grid: {
        top: "5%",
        left: "5%",

        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: true,

          axisLine: {
            show: false, // 隐藏x轴线
          },
          axisLabel: {
            show: false, // 隐藏x轴的标签
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false, // 隐藏x轴的刻度线
          },
        },
      ],
      yAxis: [
        {
          show: false,
        },
      ],
      series: [
        {
          z: 1,
          type: "bar",
          name: "TIT",
          tooltip: {
            show: false,
          },
          animation: false,
          barWidth: "35%",
          hoverAnimation: false,
          data: [
            1520, 2800, 2400, 4000, 3200, 2530, 3710, 3300, 2791, 3000, 4090,
            2400, 2800, 1520,
          ],

          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: "#1E90FF",
              opacity: 1,
              label: {
                show: false,
              },
              shadowColor: "rgba(0, 0, 0, .2)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
          },
        },
      ],
    };
    librarytotalTWOChart.setOption(librarytotaleTWOoption);
    window.addEventListener("resize", () => {
      librarytotalTWOChart.resize();
    });
    // --------------------------
    // --------------------------
  });
}
// --------------------------------------------------------------------------------------------------
</script>

<template>
  <div class="container" v-if="hasRole('LIBRARY_ROOT')">
    <div class="box">
      <div ref="lineREF" class="line"></div>
      <div ref="pieREF" class="pie"></div>
    </div>
  </div>

  <div class="containerTwo" v-if="hasRole('ADMIN')">
    <div
      style="display: flex; justify-content: center; width: 100%; height: 280px"
    >
      <el-card style="width: 550px" body-style="padding:0px">
        <div class="box-top-one">
          <div class="box-top-one-title">
            <div class="box-top-one-title-time">
              <SvgIcon
                class="el-icon"
                name="rili"
                width="20px"
                height="20px"
                style="width: 25px; height: 30px; margin-right: -1px"
              ></SvgIcon>
              <span style="margin-top: 15px; vertical-align: middle">
                开闭馆时间</span
              >
            </div>

            <div class="box-top-one-title-title">
              <el-button type="primary" link size="small"
                ><router-link to="/OChours">查看更多</router-link>
              </el-button>
            </div>
          </div>

          <div class="box-top-one-main">
            <div class="box-top-one-main-left" style="font-size: 2.8vw">
              {{ hourss }}&nbsp;:&nbsp;{{ minutess }}
            </div>
            <div class="box-top-one-main-right">
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 60vw;
                "
              >
                <!-- 开馆时间 -->
                <div
                  style="
                    width: 15px;
                    height: 15px;
                    border-radius: 150%;
                    background-color: #469cfa;
                  "
                ></div>
                <span style="margin-left: 0.3vw">开馆时间</span>
                <div style="margin-left: 1vw">
                  {{ forTime }}
                </div>
              </div>

              <!-- 闭馆时间 -->
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 200px;
                "
              >
                <div
                  style="
                    width: 15px;
                    height: 15px;
                    border-radius: 150%;
                    background-color: #e86f5e;
                  "
                ></div>
                <span style="margin-left: 0.3vw">闭馆时间</span>
                <div style="margin-left: 1vw">
                  {{ TimeEnd }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card style="width: 700px; margin-left: 10px" body-style="padding:0px">
        <div class="robotStaus">
          <div class="box-top-one-title">
            <div class="box-top-one-title-time">
              <SvgIcon
                class="el-icon"
                name="work"
                width="20px"
                height="20px"
                style="width: 30px; height: 30px"
              ></SvgIcon>
              <span style="margin-top: 15px; vertical-align: middle">
                盘点机器人使用状态</span
              >
            </div>
            <div class="box-top-one-title-title">
              <el-button type="primary" link size="small"
                ><router-link to="/robot/binding">查看更多</router-link>
              </el-button>
            </div>
          </div>
          <div ref="barREF" class="bar"></div>
        </div>
      </el-card>
      <el-card style="width: 350px; margin-left: 10px" body-style="padding:0px">
        <div class="robotStaus">
          <div class="box-top-one-title" style="height: 20px">
            <div class="box-top-one-title-time" style="margin-left: 20px">
              <SvgIcon
                class="el-icon"
                name="dianchi"
                width="20px"
                height="20px"
                style="width: 30px; height: 30px"
              ></SvgIcon>
              <span style="vertical-align: middle"> 电量</span>
            </div>
            <div class="box-top-one-title-title" style="margin-right: 30px">
              <el-button type="primary" link size="small"
                ><router-link to="/robot/binding">查看更多</router-link>
              </el-button>
            </div>
          </div>
          <div ref="pREF" class="p"></div>
        </div>
      </el-card>
    </div>

    <div
      style="
        display: flex;
        justify-content: center;
        width: 100%;
        height: 450px;
        margin-top: 10px;
      "
    >
      <el-card style="width: 680px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="baobiao"
              width="25px"
              height="30px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              图书报表</span
            >
          </div>
          <div class="box-top-one-title-title"></div>
        </div>
        <div class="library" ref="libraryREF"></div>
      </el-card>
      <el-card style="width: 930px; margin-left: 10px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="jinbi"
              width="25px"
              height="30px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              盘点信息</span
            >
          </div>
          <div class="box-top-one-title-title"></div>
        </div>
        <div class="category" ref="categoryREF"></div>
      </el-card>
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        width: 100%;
        height: 240px;
        margin-top: 10px;
      "
    >
      <el-card style="width: 680px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="time"
              width="20px"
              height="20px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              预约盘点</span
            >
          </div>
          <div class="box-top-one-title-title">
            <el-button type="primary" link size="small"
              ><router-link to="/inventory/Plan">查看更多</router-link>
            </el-button>
          </div>
        </div>
        <div style="display: flex">
          <div class="reserve" ref="reserveREF"></div>
          <div class="reserveTWO" ref="reserveTWOREF"></div>
        </div>
      </el-card>
      <el-card style="width: 930px; margin-left: 10px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="library"
              width="20px"
              height="20px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              图书总量</span
            >
          </div>
          <div class="box-top-one-title-title">
            <el-button type="primary" link size="small"
              ><router-link to="/book">查看更多</router-link>
            </el-button>
          </div>
        </div>
        <div style="display: flex">
          <div class="librarytotal" ref="librarytotalREF"></div>
          <div class="librarytotalTWO" ref="librarytotalTWOREF"></div>
        </div>
      </el-card>
    </div>
  </div>
  <div class="containerTwo" v-if="hasRole('OPERATOR')">
    <div
      style="display: flex; justify-content: center; width: 100%; height: 280px"
    >
      <el-card style="width: 100%" body-style="padding:0px">
        <div class="box-top-one">
          <div class="box-top-one-title">
            <div class="box-top-one-title-time">
              <SvgIcon
                class="el-icon"
                name="rili"
                width="20px"
                height="20px"
                style="width: 25px; height: 30px; margin-right: -1px"
              ></SvgIcon>
              <span style="margin-top: 15px; vertical-align: middle">
                开闭馆时间</span
              >
            </div>
            <div class="box-top-one-title-title">
              <!-- <el-button type="primary" link size="small">
                <router-link to="/OChours">查看更多</router-link>
              </el-button> -->
            </div>
          </div>
          <div class="box-top-one-main">
            <div
              class="box-top-one-main-left"
              style="margin-left: 15vw; font-size: 4vw"
            >
              {{ hourss }}&nbsp;:&nbsp;{{ minutess }}
            </div>
            <div class="box-top-one-main-right" style="margin-right: 20vw">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 16.2vw;
                  margin-right: 0.8vw;
                "
              >
                <!-- 开馆时间 -->
                <div
                  style="
                    width: 1vw;
                    height: 1vw;
                    border-radius: 50%;
                    background-color: #469cfa;
                    margin-left: 1.1vw;
                    margin-right: -3vw;
                  "
                ></div>
                <span style="font-size: 1vw; margin-right: 0.7vw"
                  >开馆时间</span
                >
                <div style="margin-left: 2vw; font-size: 1vw">
                  {{ forTime }}
                </div>
              </div>

              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 15vw;
                  margin-left: 0.3vw;
                "
              >
                <!-- 闭馆时间 -->
                <div
                  style="
                    width: 1vw;
                    height: 1vw;
                    border-radius: 50%;
                    background-color: #e86f5e;
                  "
                ></div>
                <span style="font-size: 1vw; margin-right: 1.5vw"
                  >闭馆时间</span
                >

                <div
                  style="margin-left: 4vw; font-size: 1vw; margin-right: 0vw"
                >
                  {{ TimeEnd }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div
      style="
        display: flex;
        justify-content: center;
        width: 100%;
        height: 450px;
        margin-top: 10px;
      "
    >
      <el-card style="width: 45%" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="baobiao"
              width="25px"
              height="30px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              图书报表</span
            >
          </div>
          <div class="box-top-one-title-title"></div>
        </div>
        <div class="library" ref="libraryREF"></div>
      </el-card>
      <el-card style="width: 55%; margin-left: 10px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="jinbi"
              width="25px"
              height="30px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              盘点信息</span
            >
          </div>
          <div class="box-top-one-title-title"></div>
        </div>
        <div class="category" ref="categoryREF"></div>
      </el-card>
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        width: 100%;
        height: 240px;
        margin-top: 10px;
      "
    >
      <el-card style="width: 45%" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="time"
              width="20px"
              height="20px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              预约盘点</span
            >
          </div>
          <div class="box-top-one-title-title">
            <el-button type="primary" link size="small"
              ><router-link to="/inventory/Plan">查看更多</router-link>
            </el-button>
          </div>
        </div>
        <div style="display: flex">
          <div class="reserve" ref="reserveREF"></div>
          <div class="reserveTWO" ref="reserveTWOREF"></div>
        </div>
      </el-card>
      <el-card style="width: 55%; margin-left: 10px" body-style="padding:0px">
        <div class="box-top-one-title">
          <div class="box-top-one-title-time">
            <SvgIcon
              class="el-icon"
              name="library"
              width="20px"
              height="20px"
              style="width: 30px; height: 30px"
            ></SvgIcon>
            <span style="margin-top: 15px; vertical-align: middle">
              图书总量</span
            >
          </div>
          <div class="box-top-one-title-title">
            <el-button type="primary" link size="small"
              ><router-link to="/book">查看更多</router-link>
            </el-button>
          </div>
        </div>
        <div style="display: flex">
          <div class="librarytotal" ref="librarytotalREF"></div>
          <div class="librarytotalTWO" ref="librarytotalTWOREF"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.containerTwo {
  min-height: 100%;
}
.box-top-one {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.el-icon {
  vertical-align: middle;
  margin-right: -5px;
}
.box-top-one-title {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.box-top-one-title-time {
  font-weight: 700;
  height: 50px;
  margin-left: 20px;
  margin-top: 15px;
  white-space: nowrap;
}
.box-top-one-title-title {
  height: 30px;
  margin-right: 20px;
  margin-top: 15px;
}
.box-top-one-main {
  height: 100%;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-top-one-main-left {
  margin-left: 50px;
  font-size: 60px;
}
.box-top-one-main-right {
  width: 200px;
  height: 90px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-right: 30px;
}
.robotStaus {
  height: 280px;
  width: 100%;
}
.library {
  height: 430px;
  width: 100%;
  padding-right: 30px;
}
.category {
  height: 430px;
  width: 100%;
}
.reserve {
  height: 120px;
  width: 150px;
  margin-top: 40px;
  margin-left: 50px;
}
.reserveTWO {
  height: 240px;
  width: 100%;
}
.librarytotal {
  height: 120px;
  width: 150px;
  margin-top: 40px;
  margin-left: 120px;
}
.librarytotalTWO {
  height: 240px;
  width: 100%;
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line {
  margin-top: 20px;
  width: 700px;
  height: 550px;
  border-right: 1px solid #f2f3f5;
}
.pie {
  margin-top: 20px;
  width: 700px;
  height: 550px;
}
.bar {
  margin-top: 10px;
  height: 220px;
}
.p {
  margin-top: 10px;
  height: 220px;
}
</style>
